@import "../comment/constants";
@import "../comment/init";
@import "../comment/header";
@import "../comment/footer";
@import "../comment/body";
@import "../comment/news_list";



.main{
    .wrapper{
        .main-content-wrapper{
            background: #fff;
            width:800px;
            float: left;
            //banner图
            .banner-group{
                width: 760px;
                height:200px;
                position: relative;
                overflow: hidden;
                .arrow{
                    position: absolute;
                    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                    font-size: 70px;
                    color: white;
                    top:50%;
                    cursor: pointer;
                    z-index: 1;
                    margin-top: -45px;
                }
                //左右箭头
                .left-arrow{
                    left:20px;
                }
                .right-arrow{
                    right:20px;
                }
                .banner-ul{
                    height:200px;
                    width:800*4px;
                    overflow: hidden;
                    position: absolute;
                    left:0;
                    li{
                    width: 800px;
                    height:200px;
                    float: left;
                        img{
                            width: 800px;
                            height:200px;
                        }
                    }
                }
                //小圆点
                .page-control-group{
                    position: absolute;
                    left:0;
                    right:0;
                    bottom:20px;
                    .page-control{
                        margin:0 auto;
                        overflow: hidden;
                        li{
                            border: 1px solid #fff;
                            float: left;
                            width:10px;
                            height:10px;
                            border-radius: 50%;
                            margin:0 10px;
                            box-sizing: border-box;
                            cursor: pointer;
                            &.active{
                                background: #fff;
                        }
                        }
                    }
                }

            }
        }

    }
}

.main{
    .wrapper{
        .main-content-wrapper{
            .recommend-news{
                height:220px;
                width:800px;
                overflow: hidden;
                margin-top: 20px;
                li{
                    float: left;
                    margin-right: 16px;
                    position: relative;
                    .photo{
                        width: 250px;
                        height:180px;
                        img{
                            width: 250px;
                            height: 178px;
                        }
                    }.info{
                                             color: #fff;
                                             width:250px;
                                             height:60px;
                                             background: rgba(0,0,0,0.5) ;
                                             position: absolute;
                    left:0;
                    right: 0;
                    bottom: 0;
                                             padding:4px 15px;
                    box-sizing: border-box;
                                         }
                }
            }
        }
    }
}

.main{
    .wrapper{
        .main-content-wrapper{
            .list-outer-group{
                width:800px;
                height:64px;
                border-top:1px solid #EDEDED ;
                border-bottom:1px solid #EDEDED ;
                margin-top:-20px;
                .list-tab{
                    padding:5px;
                    overflow: hidden;
                    li{
                        float: left;
                        margin-right:30px;
                        margin-top:15px;
                        padding-left: 8px;
                        &:first-of-type{
                            border-left:4px solid #E63929;
                        }
                        a{
                            color: #101010;
                        }
                        &.active{
                            a{
                                color: #EC5829;
                            }
                        }
                    }
                }
            }
        }
    }
}

.main{
    .wrapper{
        .main-content-wrapper{
            .list-inner-group{
                @include news_list;
            }
        }
    }
}

.main{
    .wrapper{
        .main-content-wrapper{
            .load-more-group{
                padding: 20px 0;
                text-align: center;
                .load-more-btn{
                    width: 400px;
                    height:40px;
                    background: #F7766A;
                    border:none;
                    outline: none;
                    cursor: pointer;
                    color: white;
                }
            }
        }
    }
}




